<!--住宿记录-->
<template>
    <div>
        <el-date-picker v-model="value1" type="daterange" range-separator="~" start-placeholder="开始日期"
          end-placeholder="结束日期" :size="size" @change="handleRegionChange" />
    </div>
    <div>
        <el-table ref="multipleTableRef" :data="tableData" style="width: 100%"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column property="RoomNumberName" label="房号" width="120" />
            <el-table-column property="Rtname" label="房型" width="120" />
            <el-table-column property="PassengerName" label="状态" width="120" />
            <el-table-column property="truename" label="客人姓名" width="120" />
            <el-table-column property="CheckTime" label="(预)抵店时间" width="120" />
            <el-table-column property="DepartureTime" label="(预)离店时间" width="120" />
            <el-table-column property="name" label="客户类型" width="120" >
            <template  v-slot="scope">
                            <span v-if="scope.row.Passenger == 35">会员</span>
                            <span v-if="scope.row.Passenger == 36">非会员</span>
                </template  >
          </el-table-column>
            <el-table-column label="操作">
               <template  v-slot="scope">
                                    <el-link :underline="false"   @click="AddOrder()"
                                            v-if="scope.row.State ==62" >入住</el-link>
                                            &nbsp;
                                            <el-link :underline="false" 
                                            v-if="scope.row.State ==62">取消排房</el-link>
                                            &nbsp;
                                            <el-link :underline="false" 
                                            v-if="scope.row.State ==62">取消预定</el-link> &nbsp;
                                            <el-link :underline="false" 
                                            v-if="scope.row.State ==62" @click="OrderFind(scope.row.Id)" >详情</el-link>
                                            &nbsp;
                                        <el-link :underline="false" 
                                            v-if="scope.row.State == 65 ">退房</el-link>
                                            &nbsp;
                                            <el-link :underline="false" 
                                            v-if="scope.row.State == 65 ">结算</el-link>
                                            &nbsp;
                                            <el-link :underline="false" 
                                            v-if="scope.row.State == 65 ">详情</el-link>
                                            &nbsp;
                                            <el-link :underline="false" 
                                            v-if="scope.row.State == 63 ">详情</el-link>
                                            &nbsp;

                </template  >
            </el-table-column>
        </el-table>
        <table style="margin: 5px auto;">
            <tbody>
              <tr>
                <td><el-pagination v-model:current-page="pager.pageIndex" v-model:page-size="pager.pageSize"
                    :page-sizes="[1, 2, 3, 10]" layout="total, slot,sizes" :total="pager.totalCount"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" prev-text="上一页"
                    next-text="下一页">
                    <span class="el-pagination__total is-first">&nbsp;共计{{ pager.pageCount }}页,当前{{
        pager.pageIndex
      }}/{{ pager.pageCount }}页</span>
                  </el-pagination>
                </td>
                <td><el-pagination v-model:current-page="pager.pageIndex" v-model:page-size="pager.pageSize"
                    :page-sizes="[1, 2, 3, 10]" layout="slot, prev, pager" :total="pager.totalCount"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" prev-text="上一页"
                    next-text="下一页">
                    <button @click="handleCurrentChange(1)" :disabled="pager.pageIndex == 1"
                      class="btn-prev">首页</button>
                  </el-pagination></td>
                <td><el-pagination v-model:current-page="pager.pageIndex" v-model:page-size="pager.pageSize"
                    :page-sizes="[1, 2, 3, 10]" layout="slot, next, jumper" :total="pager.totalCount"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" prev-text="上一页"
                    next-text="下一页">
                    <button @click="handleCurrentChange(pager.pageCount)" :disabled="pager.pageIndex == pager.pageCount"
                      class="next-prev">尾页</button>
                  </el-pagination></td>
              </tr>
            </tbody>
          </table>
    </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { ElTable } from 'element-plus'
import axios from 'axios';
import router from '@/router';

const size = ref<'default' | 'large' | 'small'>('default')
const value1 = ref("","");
const shortcuts = [
  {
    text: 'Last week',
    value: () => {
      const end = new Date()  
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
] 
// 引入分页组件

 interface User {
    date: string
    name: string
    address: string
}
const pager = {
  pageIndex: 1,
  pageSize: 10,
  totalCount: 0,
  pageCount: 0,
}
//axios.defaults.baseURL = 'http://10.31.59.9:9033/api/';//设置请求的根路径
const tableData = ref([])
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<User[]>([])
const toggleSelection = (rows?: User[]) => {
    if (rows) {
        rows.forEach((row) => {
            // TODO: improvement typing when refactor table
            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
            // @ts-expect-error
            multipleTableRef.value!.toggleRowSelection(row, undefined)
        })
    } else {
        multipleTableRef.value!.clearSelection()
    }
}
const   AddOrder=()=> 
{

}
const handleSelectionChange = (val: User[]) => {
    multipleSelection.value = val
}
const handleEdit = (index: number, row: User) => {
    console.log(index, row)
}
function ClientcuStomersShow()
{
    
axios.get("http:localhost:5003/api/ClientcuStomer/ClientcuStomersShow",{params:{
    pageIndex:pager.pageIndex,
    pageSize:pager.pageSize,
    StartTime:value1.value[0],
    EndTime:value1.value[1],
  
}}).then(res=>{
    tableData.value = res.data.Data
    pager.totalCount = res.data.TotalCount;
    pager.pageCount = res.data.PageCount;
})
}
function handleSizeChange(size: number) {
  pager.pageSize = size;
  ClientcuStomersShow();
}
function handleCurrentChange(index: number) {
  pager.pageIndex = index;
  ClientcuStomersShow();
}
const handleRegionChange = () => {
    ClientcuStomersShow()
};
function OrderFind(id: number) {

  router.push({ path: '/index/subIndex/OrderInfoParticulars', query: { aaid: id } });
}
onMounted(() => {
    ClientcuStomersShow()
});
</script>
<style scoped>
.demo-date-picker {
    display: flex;
    width: 100%;
    padding: 0;
    flex-wrap: wrap;
}

.demo-date-picker .block {
    padding: 30px 0;
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    flex: 1;
}

.demo-date-picker .block:last-child {
    border-right: none;
}

.demo-date-picker .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}
</style>
